<template>
  <div class='container'>
    <el-dialog title="题目预览" :visible="showDialog" @close="closebtn">
      <el-row>
        <el-col :span="6">【题型】{{ data.questionType | tx }}</el-col>
        <el-col :span="6">【编号】{{ data.id }}</el-col>
        <el-col :span="6">【难度】{{ data.difficulty | nd }}</el-col>
        <el-col :span="6">【标签】{{ data.tags }}</el-col>
        <el-col :span="6">【学科】{{ data.subjectName }}</el-col>
        <el-col :span="6">【目录】{{ data.directoryName }}</el-col>
        <el-col :span="6">【方向】{{ data.direction }}</el-col>
      </el-row>
      <hr>
      【题干】:
      <div v-html="data.question" style="color:blue"></div>
      <!-- 通过判定试题类型从而显示对应格式的答案类型 -->
      <!-- 1-单选 2-多选 3-简答 -->
      <div v-if="data.questionType !== '3'">
        <div>{{ data.questionType | tx }}选项：(以下选中的选项为正确答案)</div>
        <div v-for="item in data.options" :key="item.id" style="padding:5px 0">
          <el-radio v-if="data.questionType === '1'" :value="item.isRight" :label="1">{{ item.title }}</el-radio>
          <el-checkbox v-if="data.questionType === '2'" :value="item.isRight ? true : false">{{
            item.title
          }}</el-checkbox>
        </div>
      </div>
      <hr>
      【参考答案】:
      <el-button type="danger" @click="clickvideo">视频答案预览</el-button>
      <meta name="referrer" content="never" />
      <!-- 这里直接去获取src会因为Referer: http://localhost:8080/请求头被拒绝 -->
      <!-- 请求的是别人服务器上的资源，把自己的referrer信息带过去了，所以被对方服务器拦截返回了403 -->
      <!-- <meta name="referrer" content="never" /> 清除referer -->
      <video style="display:none" ref="video" controls :src=data.videoURL></video>
      <hr>
      <span>【答案解析】:</span>
      <div v-html="data.answer" style="display:inline-block"></div>
      <hr>
      <span>【题目备注】:</span>
      <div v-html="data.remarks" style="display:inline-block"></div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closebtn">关闭</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
import { questionType, difficulty } from '@/api/hmmm/constants'
export default {
  props: {//需要设置visible属性，它接收Boolean，当为true时显示 Dialog
    showDialog: {//通过父组件也就是进行传参 
      type: Boolean,
      default: false
    },
    data: {//接受需要渲染的数据
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      questionType,//题型
      difficulty,//难度
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px'
    }
  },
  filters: {//过滤器 
    // 用过滤器原因
    tx(value) {//题型过滤器
      if (value) return questionType.find(item => item.value === +value).label + '题'
    },
    nd(value) {//难度过滤器
      if (value) return difficulty.find(item => item.value === +value).label
    },
  },
  methods: {
    // 关闭弹层
    closebtn() {
      this.$refs.video.style = 'display:none'
      this.$refs.video.pause()
      this.$emit('update:showDialog', false) // sync修饰符双向绑定关闭新增弹出框
    },
    clickvideo() {
      this.$refs.video.style = 'display:block'
    }
  }
}
</script>

<style scoped lang="scss">
video {
  width: 400px;
  height: 300px;
}
</style>
